<template>
	<view class="circle-content">
		<!-- 顶部 -->
		<view class="like-circle">
			<view class="like-title">我关注的频道</view>
			<view class="like-conts">
				<view class="conts-top">
					<view class="like-column" v-for="item in myCircle.data" :key="item.id" @click="toCircleDetail(item.id)">
						<image :src="item.image" mode="aspectFit"></image>
						<view class="like-detail">
							<view class="detail-title">{{ item.title }}</view>
							<view class="detailhot">热度:&nbsp;&nbsp;{{ item.heat }}</view>
						</view>
					</view>
					<view class="like-column" style="align-items: center;" @click="toMyCircle" v-if="more">
						<view class="more" style="background-color:linear-gradient(rgba(47,119,241,0.5),rgba(47,119,241,0.1));">
							<image src="/static/forum/more.png" mode="heightFix" style="width: 50%;height: 50%;border-radius: 0;"></image>
						</view>
						<!-- <view style="font-size: 28rpx;">更多</view> -->
						<view class="like-detail">
							<view class="detail-title">更多</view>
							<view class="detailhot">查看我的频道</view>
						</view>
					</view>
					<view class="like-column" @click="createCircle">
						<image src="/static/forum/found.png" mode="aspectFit"></image>
						<view class="like-detail">
							<view class="detail-title">创建频道</view>
							<view class="detailhot">创建自己的频道</view>
						</view>
					</view>
				</view>
				<!-- <view class="conts-bottom">
				</view> -->
			</view>
		</view>

		<!-- 频道分类 -->
		<view class="circle-sort">
			<view class="type-title">频道分类</view>
			<scroll-view scroll-x="true" class="menu-nav">
				<view class="type-column" v-for="item in type_data" :key="item.id" @click="toDetail(item.id, item.name)">
					<!-- <image :src="adminImgPath + item.image" mode="aspecFit"></image> -->
					<image :src="item.image" mode="aspecFit"></image>
					<view class="mark">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 频道列表 -->
		<view class="circle-list">
			<view class="list-title">频道列表</view>
			<view class="list-cont">
				<circleList :type="type" :circleList="circleList" @attention="attention" @cancleSub="cancleSub"></circleList>
				<view class="" style="margin-top: 10rpx;color: #656565;font-size: 26rpx;text-align: center;" v-if="circleList.length != 0 && !hasMore">没有更多了~</view>
			</view>
		</view>

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue'
import circleList from '@/pages/Component/forum/component/circle/circle-list.vue'
import ikz from '@/pages/Common/tools.js'
import Vue from 'vue'
var app = getApp()
export default {
	components: {
		ikzTabbar,
		circleList,
	},
	data() {
		return {
			adminImgPath: app.globalData.adminImgPath,
			adminPath: app.globalData.adminPath,
			type: 'circle',
			type_data: [],
			tabbar_Data: {
				type: 1,
				list: [
					{
						title: '首页',
						url: '/pages/Component/forum/Program/index/index',
						iconPath: '/static/forum/tabbar/index.png',
						selectedIconPath: '/static/forum/tabbar/index-check.png',
						status: 1,
					},
					{
						title: '频道',
						url: '/pages/Component/forum/Program/circle/circle',
						iconPath: '/static/forum/tabbar/circle.png',
						selectedIconPath: '/static/forum/tabbar/circle-check.png',
						status: 1,
					},
					{
						title: '发布',
						url: '/pages/Component/forum/Program/release/release',
						iconPath: '/static/forum/tabbar/release.png',
						selectedIconPath: '/static/forum/tabbar/release-check.png',
						status: 1,
					},
					{
						title: '我的',
						url: '/pages/Component/forum/Program/personal/personal',
						iconPath: '/static/forum/tabbar/mine.png',
						selectedIconPath: '/static/forum/tabbar/mine-check.png',
						status: 1,
					},
				],
			},

			myCircle: [], //我的频道
			circleList: [], //频道列表
			more: false, //是否显示更多

			page: 1,
			limit: 5,
			hasMore: false,
		}
	},
	onLoad() {
		this.getCircleCategory()
		this.getCircleList()
		uni.hideHomeButton()
	},
	onShow() {
		this.getMyCircle()
	},
	onPullDownRefresh() {
		this.page = 1
		this.getMyCircle()
		this.getCircleList()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getCircleList()
		}
	},
	methods: {
		// 跳转频道详情
		toCircleDetail(id) {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/circle-detail/circle-detail?id=' + id,
			})
		},
		// 去频道分类详情
		toDetail(id, name) {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/circle-list?id=' + id + '&name=' + name,
			})
		},
		// 跳转我的频道
		toMyCircle() {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/personal/nav-menu/mycircle',
			})
		},
		// 创建频道
		createCircle() {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/create-circle',
			})
		},

		// 获取我关注的频道
		getMyCircle() {
			let path = '/xyb/posts/posts_circle/circle_follow'
			let data = {
				token: uni.getStorageSync('local_user_session'),
			}
			ikz.requestPost(path, data, res => {
				// console.log('获取我关注的频道', res.data.data);
				if (res.statusCode == 200) {
					this.myCircle = res.data.data
					if (this.myCircle.count > 6) {
						this.myCircle.data = this.myCircle.data.slice(0, 6)
						this.more = true
					}
					// console.log(this.myCircle);
				}
			})
		},
		// 获取频道分类
		getCircleCategory() {
			let path = '/xyb/posts/posts_circle/category'
			let data = {}
			ikz.requestPost(path, data, res => {
				// console.log('获取频道分类', res)
				if (res.statusCode == 200) {
					this.type_data = res.data.data
				}
			})
		},
		// 获取频道列表
		getCircleList() {
			let path = '/xyb/posts/posts_circle/index'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				page: this.page,
				limit: this.limit,
			}
			ikz.requestPost(path, data, res => {
				// console.log(res);
				if (res.statusCode == 200) {
					let circleList = res.data.data.data
					this.circleList = this.page == 1 ? circleList : [...this.circleList, ...circleList],
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				uni.stopPullDownRefresh()
			})
		},
		// 关注频道
		attention(id) {
			// console.log(id);
			let path = '/xyb/posts/posts_circle/follow'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: id,
			}
			ikz.requestPost(path, data, res => {
				// console.log('关注频道', res);
				if (res.statusCode == 200) {
					this.getMyCircle()
					this.circleList.forEach(el => {
						if (el.id == id) {
							el.follow_status = 1
						}
					})
					uni.showToast({
						title: '关注成功',
						icon: 'none',
					})
				}
			})
		},
		// 取消关注频道
		cancleSub(id) {
			let path = '/xyb/posts/posts_circle/follow_del'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: id,
			}
			ikz.requestPost(path, data, res => {
				// console.log('关注频道', res);
				if (res.statusCode == 200) {
					this.getMyCircle()
					this.circleList.forEach(el => {
						if (el.id == id) {
							el.follow_status = 0
						}
					})
					uni.showToast({
						title: '取消关注成功',
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f6f7fb;
}

.circle-content {
	padding: 26rpx 26rpx 106rpx 26rpx;

	.like-circle {
		background: #ffffff;
		border-radius: 28rpx;
		padding: 26rpx;

		.like-title {
			font-size: 36rpx;
			font-weight: 600;
		}

		.like-conts {
			margin-top: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;

			.conts-top {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.like-column {
					display: flex;
					width: 48%;
					margin-top: 15rpx;

					.more {
						overflow: hidden;
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
						background: linear-gradient(rgba(47, 119, 241, 0.1), rgba(47, 119, 241, 0.5));
						border-radius: 18rpx;

						image {
							transform: translate(50%, 50%);
						}
					}

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 18rpx;
					}

					.like-detail {
						margin-left: 20rpx;
						height: 93rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.detail-title {
							font-size: 28rpx;
						}

						.detailhot {
							color: #656565;
							font-size: 26rpx;
						}
					}
				}
			}

			.conts-bottom {
				margin-top: 15rpx;

				.like-column {
					display: flex;
					width: 48%;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.like-detail {
						margin-left: 20rpx;
						height: 93rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.detail-title {
							font-size: 28rpx;
						}

						.detailhot {
							color: #656565;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}

	.circle-sort {
		margin-top: 30rpx;
		background: #ffffff;
		border-radius: 28rpx;
		padding: 26rpx;

		.type-title {
			font-size: 36rpx;
			font-weight: 600;
		}

		.menu-nav {
			white-space: nowrap;
			margin-top: 30rpx;
			display: flex;

			.type-column {
				display: inline-block;
				margin-right: 32rpx;
				position: relative;

				image {
					display: inline-block;
					width: 160rpx;
					height: 160rpx;
					border-radius: 18rpx;
				}

				.mark {
					position: absolute;
					top: 0;
					width: 160rpx;
					height: 160rpx;
					text-align: center;
					line-height: 160rpx;
					font-size: 36rpx;
					color: #ffffff;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 18rpx;
				}
			}
		}
	}

	.circle-list {
		margin-top: 30rpx;
		background: #ffffff;
		border-radius: 28rpx;
		padding: 26rpx;

		.list-title {
			font-size: 36rpx;
			font-weight: 600;
		}
	}
}
</style>
